<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0px;
        }
        .div1 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 10px;
            background: olive;
        }
        .div2 {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50px;
            background: red;
        }
        .div3 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 230px;
            background: olive;
        }
        .div4 {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50px;
            background: yellow;
        }
    
        .divText{
            position: absolute;
            top: 330px;
            left: 10px;
        }
    </style>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            var $div_div1=$("div.div1");
            var $div_div3=$("div.div3");
            //给div1绑定mouseover和mouseout
            $div_div1.mouseover(function(){
                console.log("div1绑定了mouseover事件");
            })
            $div_div1.mouseout(function(){
                console.log("div1绑定了mouseout事件");
            })
            //给div3绑定mouseenter和mouseleave
            $div_div3.mouseenter(function(){
                console.log("div3绑定了mouseenter事件");
            })
            $div_div3.mouseleave(function(){
                console.log("div3绑定了mouseleave事件");
            })

            //给div1绑定click(fun)
            $div_div1.click(function(){
                console.log("div1绑定了click(fun)");
            })
            $div_div1.click(function(){
                console.log("div1绑定了click(fun)2");
            })
            //给div3绑定on("click",fun)
            $div_div3.on("click",function(){
                console.log("div3绑定了on(click,fun)");
            })
            $div_div3.on("click",function(){
                console.log("div3绑定了on(click,fun)2");
            })
        })
    </script>
</head>
<body>
    <div class="divText">
        区分鼠标的事件
    </div>
    
    <div class="div1">
        div1.....
        <div class="div2">div2....</div>
    </div>
    
    <div class="div3">
        div3.....
        <div class="div4">div4....</div>
    </div>
    <!--
    区别mouseover与mouseenter?
        * mouseover: 在移入子元素时也会触发, 对应mouseout
        * mouseenter: 只在移入当前元素时才触发, 对应mouseleave
                                    hover()使用的就是mouseenter()和mouseleave()
    区别on("eventname",fun)与eventname(fun)
    on("eventname",fun):通用，但是编码麻烦
    eventname(fun):编码简单，但有的事件没有对应的办法
    -->
</body>
</html>